Staying Safe Online: For the Older Generation

Week 3: Establish your narrative and file structure

Task 1: Understanding Narrative Points and Creating a Plan

Chosen Reading: Applying Visual Storytelling to Website Designs

Summary

The article discusses the use of visual cues to convey a message and create a tone for website design. It delves into using typography, emoticons, and thematic experiences to develop a narrative, providing examples along the way.

Visual Storytelling

Visual storytelling uses visual cues to create patterns that inform viewers. It can be applied to website designs through the selection of icons, typography, photography, and interaction to support the story.

How can interactive elements be used to convey a message?

Interactive elements can convey a message by allowing users to control the narrative and explore the possibilities of the web as a communications medium. This can be achieved through non-linear navigation, animations, and interactive puzzles.

How can the tone of a website be established?

The tone of a website can be established through mood boards, typography, and descriptive keywords. Mood boards help gather design elements like colors, textures, typography, and shapes to set the tone. Typography conveys modernity or traditionalism, while descriptive keywords provide creative direction and multiple angles for the client's project.

What are some tips for effectively communicating a story to an audience?

Tips for effective storytelling include writing in the first-person for personal content and third-person for corporate content, structuring content in a personable and objective manner, and using visuals to enhance the story.

Task 2: Incorporate the Narrative Plan into Your Portfolio

• Raising Awareness: I want people to know about the dangers of online communities, like scams and cyberbullying.
• Practical Skills: I aim to raise awareness of how to stay safe online, like spotting scams and dealing with cyberbullying.
• Helpful Resources: I'll share extra help like helplines and support groups for those struggling with online safety.
• Boosting Confidence: I'll help people feel more confident in using online forums without fear.
• Engagement: I'll encourage folks to share their stories and questions so I can tailor my content to their needs.
• Spread the Word: I'll want people to share what they learn to make the internet safer for everyone.

Example Narrative (that I could use in my final project)

• Homepage: An introduction to what online saftey is, a key guide on how to access the website, as well as various accessiblity toggles which can be switched on and off based on the users needs.
• Information: Some brief information on various key practices to put into place on online saftey. For example, how to setup secure passwords, avoid scams, identify misinformation etc.
• Interaction: A page with interactive elements based on my subject. For example there could be a quiz on online saftey that uses various multimedia elements to help sythesise learning. Furthermore, I could implement some a 'testing' area or demo where the user could practice what to do if they received or were unsure about something they've encountered online. This could be a interactive game based on reciveing a scam email, or ransomware.
• Resources: A page with links and guides to further resources, as well as pointers and options to share the website with other people who might also struggle with online saftey.

These narrative points set out the aims I have for the project. Orchestrating a narrative that helps check these targets is my overall goal for the project. The best way to do this would be to provide information in the most engaging way possible, so that the information is easy to access and take in. This can be done by taking careful considerations of my website design, making sure the overall design is the most important factor.

Overall my design considerations are: accessiblity, ease of navigation, simplistic display of information and non-contrasting colours. I have found the W3 accessability guidelines which I can use to design my website to make it as accessible as possible.

Task 3: Begin preperation for the project proposals

With an audience and narrative in place, I am now able to prepare my project for its prposal submission.

Task 4: Using Github

As of right now my experience with GitHub is incredibly limited, I have used it in the past only to download files, and never had an account. I have since made an account and repo, and connected it directly to my VSCode account. Which allows to me commit changes directly from VSCode, and use version control. Something that I imagine I will find incredibly helpful over the semester. I have also launched the Website! If you are reading this then you are on it! (unless you are me).